<template>
    <div class="Father">
        <h1>父组件</h1>
        <p>car:{{ car }}</p>
        <button @click="changeToy">修改子1的玩具</button>
        <!-- ref标识 -->
        <Child1 ref="c1"/>
        <Child2 ref="c2"/>
        <button @click="changeAllData($refs)">修改所有子的数据</button>
    </div>
    </template>
    
    <script lang="ts">
    export default {
    name:'Father'
    }
    </script>
    
    <script setup lang="ts">
import { ref } from 'vue';
import Child1 from './Child1.vue';
import Child2 from './Child2.vue';
    let car = ref('奔驰')
    //将车曝光给子组件
    defineExpose({car})
    let c1 = ref()
    function changeToy() { 
        // console.log(c1.value.toy);
        c1.value.toy='小恐龙'
    }

    function changeAllData(refs:any) { 
        refs.c1.toy = '小鸟'
        refs.c2.computer = '小木'
    }
    
    </script>
    
    <style lang="css">
    .Father{
        margin: 20px;
        height: 600px;
        width: 500px;
        background-color:aqua;
    }
    </style>